<template>
    <div>
        <div class="tabitem"  
             @click="hanleClick(index)" 
             v-for="(item,index) in list" 
             :key="index"
             :style="{color:cur==index?'red':''}">
            <div>
                <i :class="['iconfont',item.icon]"></i>
            </div>
            <div>{{item.text}}</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            cur:0
        }
    },
    props:{
        list:{
            type:Array
        }
    },
    methods:{
        hanleClick(index){
            this.cur=index
        }
    }
}
</script>

<style lang="scss">
@import url('@/assets/css/base.css');
.tabitem{
    flex: 1;
    text-align: center;
    .iconfont{
        font-size: 24px;
    }
}
</style>